<script setup lang="ts">

    import { useArticleStore } from '@/stores/article';
    import { onBeforeMount } from 'vue';

    import Main from '@/views/Main/index.vue';
    import Carousel from '@/views/Main/Home/components/Carousel/index.vue';
    import Card from '@/views/Main/Home/components/Card/index.vue';
    import BlogList from '@/views/Main/Home/components/BlogList/index.vue';
    import Link from '@/views/Main/Home/components/Link/index.vue';
    import BloggerTab from '@/views/Sidebar/components/Blogger/index.vue';
    import RecommendTab from '@/views/Sidebar/components/Recommend/index.vue';
    import LastCommentTab from '@/views/Sidebar/components/LastComment/index.vue';

    const articleStore = useArticleStore();

    onBeforeMount(() => {
        // 初始化数据
        articleStore.initParam();
        // 获取文章列表
        articleStore.getArticleList({});
    });

</script>
<template>
    <Main>
        <template #leftColumn>
            <!-- 轮播图 -->
            <Carousel />
            <!-- 博客推荐 -->
            <Card />
            <!-- 博客列表 -->
            <BlogList :data="articleStore.articleData" :loading="articleStore.loading" />
        </template>
        <template #rightColumn>
            <!-- 博主介绍 -->
            <blogger-tab />
            <!-- 站长推荐 -->
            <recommend-tab />
            <!-- 最新评论 -->
            <last-comment-tab />
        </template>
        <template #bottom>
            <!-- 友情链接 -->
            <Link />
        </template>
    </Main>
</template>